<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/left.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/vue.js"></script>
    <title>系统权限管理</title>
    <style>
        .remark{
            margin-bottom: 20px;
            margin-right: 300px;
            color: #737373;
        }

    </style>
    <script type="text/javascript">
        $(function(){

            var vue = new Vue({
                el:'#app',
                data:{
                    pages:1,
                    url:'http://localhost:8889/power',
                    powers:[],
                    param:{page:1,rows:8}
                },
                methods:{
                    query : function () {
                        var that = this;
                        var info = {
                            page:that.param.page,
                            rows:that.param.rows
                        }
                        $.getJSON(that.url+'/query',info,function(data){
                            that.powers = data.list;
                            that.pages =  data.pages;
                        })
                    },
                    forward : function(id){
                        location.href = "power.html?id="+id;
                    },
                    upordwon : function(id,flag,xh){
                        var that = this;
                        $.get(that.url + '/upxh', {id: id, flag: flag,xh:xh}, function (data) {
                            if (data) {
                                that.query();
                            }
                        })
                    },
                    setpage:function(page){
                        this.param.page = page;
                        this.query();
                    },
                    remove:function(id){
                        console.log(id)
                        var that = this;
                        var info = {'id':id};
                        $.get(that.url+'/remove',info,function (data) {
                            if(data!=null){
                                alert("删除成功"+id)
                                that.query();

                            }else{
                                alert("删除失败"+id)

                            }
                        })
                    },
                }
            });
            vue.query();
            $("#header").load("header.html");
            $("#left").load("left.html");
        })
    </script>
</head>
<body>
<div class="container-fluid" id="app">
    <div class="row" id="header"></div>
    <div class="row">
        <div class="col-md-2" id="left"></div>
        <div class="col-md-9"  style="margin-left:30px;margin-top:10px">
            <div class="row tithead"style="margin-left: 15px"><h3 class="glyphicon glyphicon-lock"> 权限管理
            </h3></div>
            <div class="row col-md-10">
                <ul class="nav nav-tabs" role="tablist" style="margin-bottom: 30px;margin-top: 10px">
                    <li role="presentation" class="active">
                        <a href="#coa" aria-controls="coa" role="tab" data-toggle="tab">权限信息</a>
                    </li>

                </ul>
                <div class="table-responsive" style="margin-top: 15px">
                    <table class="table table-bordered table-hover table-striped">
                        <thead>
                        <tr>
                            <th class="text-center">权限序号</th>
                            <th class="text-center">权限名称</th>
                            <th class="text-center">父级权限</th>
                            <th class="text-center">权限地址</th>
                            <th class="text-center">图标编码</th>
                            <th colspan="2" class="text-center">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(p,index) in powers" class="text-center">
                            <td>{{index+1}}</td>
                            <td>{{p.pname}}</td>
                            <td>{{p.fname}}</td>
                            <td>{{p.url}}</td>
                            <td>{{p.icon}}</td>
                            <td><a @click="forward(p.id)" href="#" class="btn btn-warning btn-sm">编辑</a></td>
                            <td><button @click="remove(p.id)" class="btn btn-sm btn-danger">删除</button></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!--分页处理-->
            <div class="row">
                <div class="col-md-10 text-center">
                    <nav aria-label="Page navigation">
                        <ul class="pagination" style="margin: 0">
                            <li @click="setpage(1)">
                                <a href="#" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li v-for="p in pages" @click="setpage(p)">
                                <a href="#">{{p}}</a>
                            </li>
                            <li @click="setpage(pages)">
                                <a href="#" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
            <div class="row text-right remark"><h5>备注：权限信息详细展示. </h5></div>
        </div>
    </div>
</div>
</body>
</html>